{extend name="common:base" /}

{block name="title"}添加货物 - 天佑二手货{/block}
{block name="page"}goods{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__STATIC__/css/simditor.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/css/croppic.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/css/goods.css">
{/block}

{block name="main"}
<div class="am-g am-g-fixed am-margin-top">
    <div class="am-u-sm-10 am-u-sm-centered">
        <h2>添加货物</h2>
        <hr>
        <form class="am-form">
            <div class="am-g am-g-collapse">
                <select name="area" data-am-selected="{btnWidth: '6em', btnSize: 'sm'}" name="area">
                    <option value="1" selected>南岸校区</option>
                    <option value="2">双福校区</option>
                </select>
                <select name="type" data-am-selected="{btnWidth: '4em', btnSize: 'sm'}" name="type">
                    <option value="1" selected>出售</option>
                    <option value="2">租赁</option>
                </select>
                <select data-am-selected="{btnWidth: '6em', btnSize: 'sm'}">
                    <option value="a">书籍资料</option>
                    <option value="b">Banana</option>
                    <option value="o">Orange</option>
                    <option value="m">Mango</option>
                </select>
                <select name="cate_id" data-am-selected="{btnWidth: '8em', btnSize: 'sm'}">
                    <option value="1">教材</option>
                    <option value="2">Banana</option>
                    <option value="3">Orange</option>
                    <option value="4">Mango</option>
                </select>
            </div>
            <div class="am-g am-g-collapse am-margin-top">
                <div class="am-u-sm-8">
                    <label for="title">货物名称:</label>
                    <input class="am-input-sm" type="text" name="title" id="title" value=""
                        placeholder="如：旧手机一台；计算机网络教科书若干；">
                    <small>请您一次只添加一件物品，系统会为用户推荐您其他正在出售的货物</small>
                </div>
            </div>
            <div class="am-form-group am-margin-top">
                <textarea id="editor" placeholder="补充说明点什么" name="description"></textarea>
            </div>

            <div class="am-g am-g-collapse croped-container"></div>
            <div class="croppic-container" id="cropContaineroutput"></div>
            <button class="am-btn am-btn-sm am-btn-primary" id="cropButton">添加展示图片</button>
            <input class="am-hide" name="photo"></input>

            <div class="am-cf am-g-collapse am-margin-top">
                <div class="am-u-sm-4">
                    <label class="">标价</label>
                    <div class="am-form-group am-form-primary am-form-icon">
                        <i class="am-icon-cny am-padding-left-xs"></i>
                        <input type="text" name="price" class="am-form-field am-input-primary" placeholder="998">
                    </div>
                </div>
                <div class="am-u-sm-7 am-u-offset-1">
                    <label class="">砍价 <small>小砍怡情 大砍伤身</small></label>
                    <div class="am-form-group">
                        <label class="am-radio-inline">
                            <input type="radio" name="bargain" value="0" checked data-am-ucheck> 不二价
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="bargain" value="1" data-am-ucheck> 可小刀
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="bargain" value="2" data-am-ucheck> 随便砍
                        </label>
                    </div>
                </div>
            </div>
            <label class="am-margin-top">上架期限</label>
            <div class="am-cf am-g-collapse">
                <div class="am-form-group" id="deadline-inline">
                    <label class="am-radio-inline">
                        <input type="radio" name="deadline" value="7" data-am-ucheck> 一周
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="deadline" value="30" data-am-ucheck> 一个月
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="deadline" value="90" data-am-ucheck checked> 三个月
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="deadline" value="180" data-am-ucheck> 六个月
                    </label>
                    <label class="am-radio-inline">
                        <input id="deadline-radio" type="radio" name="deadline" data-am-ucheck> 其他
                    </label>
                    <label class="am-radio-inline am-padding-0">
                        <input class="am-input-sm" id="deadline-other" style="display: none;" type="text" placeholder="单位: 天">
                    </label>
                </div>
            </div>

        </form>
        <div class="am-cf am-margin-top">
            <button id="form-submit" class="am-btn am-btn-primary">生成二手货</button>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src="__STATIC__/js/simditor-all.min.js"></script>
<script src="__STATIC__/js/croppic.min.js"></script>
<script type="text/javascript">
    // simditor 富文本编辑器
    var editor = new Simditor({
        textarea: $('#editor'),
        toolbar: ['title', 'bold', 'italic', 'underline', '|', 'ol', 'ul', 'blockquote', 'table', '|', 'link', 'hr'],
    });

    // deadline 输入框控制
    $('#deadline-inline > label:not(:last)').on('click', function(event) {
        $('#deadline-other').hide().attr('name', '');
    });
    $('#deadline-radio').parent('label').on('click', function(event) {
        $('#deadline-other').show().attr('name', 'deadline');
    });

    /**
     * croppic 图像处理
     */

    // 修复点击添加图片时会提交表单
    $('.am-form').on('submit', function(event) {
        event.preventDefault();
    });
    // 存储图片列表，用于保存至表单
    var piclist = [];
    // 初始化croppic控件
    var croppicContaineroutputOptions = {
            cropUrl:'{:url("api/croppic/crop")}',
            outputUrlId:'cropOutput',
            customUploadButtonId:'cropButton',
            modal:true,
            processInline:true,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onAfterImgCrop: function() {
                var imguri = $('#cropContaineroutput > img').attr('src');
                piclist.push(imguri);
                var imgname = imguri.split('/').pop();
                var html = '<div class="am-u-sm-3 am-u-end croped-box">\
                    <a class="cropimg" href="'+ imguri +'" target="_blank" title="'+ imgname +'">\
                        <div style="background-image: url('+ imguri +');"></div>\
                    <a>\
                    <a class="cropclose" onclick="removeCropBox(this)" data-uri="'+ imguri +'" href="javascript:;">\
                        <i class="am-icon-btn am-danger am-icon-sm am-icon-close"></i>\
                    </a>\
                </div>';
                $('.croped-container').append(html);
                cropContaineroutput.reset();
            },
            onError: function(errormessage) { alert('Error:'+errormessage) },
    };
    var cropContaineroutput = new Croppic('cropContaineroutput', croppicContaineroutputOptions);

    // 移除展示图片

    function removeCropBox(el) {
        var uri = $(el).attr('data-uri');
        var index = $.inArray(uri, piclist);
        if (index >= 0) piclist.splice(index, 1);
        $(el).parent('.croped-box').remove();
        $.post('{:url("api/croppic/removepic")}', {uri: uri}, function(data) {
            // 控制台显示远程移除结果
            console.log(data.msg);
        });
    }

    // 提交表单
    $.fn.stringify = function() {return JSON.stringify(this);}  // 数组转化为json
    $('#form-submit').on('click', function() {
        $('input[name="photo"]').val($(piclist).stringify());
        $.post("{:url('goods/addGoods')}", $('.am-form').serialize(), function(data) {
            $alert = $('#am-alert');
            $alert.find('.content').text(data.msg);
            $alert.modal('open');
            if(data.code) {
                setTimeout(function() {
                    location.href = data.url;
                }, data.wait * 1000);
            }
        });
    });
</script>
{/block}
